<template>
    <footer class="footer">
      <!-- 左侧部分 -->
      <div class="footer-left">
        <p>© 2025 MyWebsite. All Rights Reserved.</p>
      </div>
  
      <!-- 中间部分 -->
      <div class="footer-center">
        <a href="#" class="footer-link">关于我们</a>
        <a href="#" class="footer-link">服务条款</a>
        <a href="#" class="footer-link">隐私政策</a>
        <a href="#" class="footer-link">联系我们</a>
      </div>
  
      <!-- 右侧部分 -->
      <div class="footer-right">
        <a href="#" class="social-icon">
          <i class="fab fa-facebook-f"></i>
        </a>
        <a href="#" class="social-icon">
          <i class="fab fa-twitter"></i>
        </a>
        <a href="#" class="social-icon">
          <i class="fab fa-instagram"></i>
        </a>
        <a href="#" class="social-icon">
          <i class="fab fa-linkedin-in"></i>
        </a>
      </div>
    </footer>
  </template>
  
  <script>
  export default {
    name: "Footer",
  };
  </script>
  
  <style scoped>
  /* Footer 样式 */
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #2c3e50;
    color: #ffffff;
  }
  
  .footer-left p {
    margin: 0;
    font-size: 14px;
  }
  
  .footer-center {
    display: flex;
    gap: 15px;
  }
  
  .footer-link {
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    transition: color 0.3s;
  }
  
  .footer-link:hover {
    color: #1abc9c;
  }
  
  .footer-right {
    display: flex;
    gap: 10px;
  }
  
  .social-icon {
    text-decoration: none;
    color: #ffffff;
    font-size: 18px;
    transition: color 0.3s;
  }
  
  .social-icon:hover {
    color: #1abc9c;
  }
  
  .social-icon i {
    display: inline-block;
  }
  </style>